import { getlogin } from "../../tools/ajxas";
import "./login.css"
import React, { useEffect } from 'react';
import { Form, Input, Button,message, Space  } from 'antd';
import type { FormItemProps } from 'antd';
import imgs from "../../../public/logo.png"
import { useNavigate } from "react-router-dom";
const MyFormItemContext = React.createContext<(string | number)[]>([]);

interface MyFormItemGroupProps {
    prefix: string | number | (string | number)[];
    children: React.ReactNode;
}

function toArr(str: string | number | (string | number)[]): (string | number)[] {
    return Array.isArray(str) ? str : [str];
}

const MyFormItemGroup = ({ prefix, children }: MyFormItemGroupProps) => {
    const prefixPath = React.useContext(MyFormItemContext);
    const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);

    return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;
};

const MyFormItem = ({ name, ...props }: FormItemProps) => {
    const prefixPath = React.useContext(MyFormItemContext);
    const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;

    return <Form.Item name={concatName} {...props} />;
};

function Login() {
    const [messageApi, contextHolder] = message.useMessage();
    const navgate =useNavigate()
    const onFinish = (value: object) => {
        // console.log(value);
        // console.log(value.user.name.count, value.user.name.password);
            getlogin({
                userName:value.user.name.count,
                password:value.user.name.password,
            }).then(res => {
                // console.log(res);
                if(res.data.code==1){
                    messageApi.open({
                        type: 'success',
                        content: '登录成功',
                    });
                    localStorage.setItem("token",res.data.token)
                    setTimeout(function(){
                        navgate("/home")
                    },2000)
                }
            }, [])
    };
    return (
        <div className="my_login">
                  {contextHolder}
            <Form name="form_item_path" layout="horizontal " onFinish={onFinish} className="forms">
                <MyFormItem className="my_imgs">
                    <img src={imgs} alt=""></img>
                </MyFormItem>
                <MyFormItem>
                    <h2>中国移动边缘UPF设备配置及报价系统</h2>
                </MyFormItem>
                <MyFormItemGroup prefix={['user']}>
                    <MyFormItemGroup prefix={['name']}>
                        <MyFormItem name="count" label="账号" >
                            <Input />
                        </MyFormItem>
                        <MyFormItem name="password" label="密码">
                            <Input />
                        </MyFormItem>
                    </MyFormItemGroup>
                </MyFormItemGroup>

                <Button type="primary" htmlType="submit">
                    登录
                </Button>
            </Form>
        </div>
    )
}
export default Login